<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h2>学生列表</h2>
      <!-- v-for遍历数组  将数组中的对象一个一个遍历到stu中 -->
      <ul>
        <li v-for="stu in stus">
          {{stu.id}}-{{stu.name}}-{{stu.age}}
        </li>
      </ul>
      <hr>
      <table border="1">
        <tr>
          <td>id</td>
          <td>name</td>
          <td>age</td>
        </tr>
        <tr v-for="stu in stus">
          <td>{{stu.id}}</td>
          <td>{{stu.name}}</td>
          <td>{{stu.age}}</td>

        </tr>
      </table>

      <hr>

      <ul>
        <li v-for="(stu,index) in stus" :key="index">
          {{stu.id}}-{{stu.name}}-{{stu.age}} - {{index}}
        </li>
      </ul>
      
      <hr>
      <ul>
        <li v-for="(d,k) of dog">

          {{d}}--{{k}}
        </li>
      </ul>
      <hr>
      <ul>
        <li v-for="(s,j) in str" :key="j">
          {{s}}--{{j}}
        </li>
      </ul>

      <input type="text" v-model="dog.name">

    </div>
  </body>
</html>
<script src="js/vue.js"></script>
<script>
  new Vue({
    el: "#app",
    data: {
      //数组
      stus:[
        {id:'001',name:'张三',age:18},
        {id:'002',name:'李四',age:19},
        {id:'003',name:'王五',age:20},
        {id:'004',name:'赵六',age:21},
        {id:'005',name:'孙七',age:22},
        {id:'006',name:'周八',age:23},
      ],
      //对象
      dog:{
        name:'旺财',
        age:5,
        color:'灰色'
      },
      //字符串
      str:'helloword'
    
    },
   beforeCreate(){
    console.log("创建之前")
   },
    created(){
      console.log("创建完成 发送请求给后端要数据")
      
    },
    beforeMount(){
      console.log("挂载之前")
    },
    mounted(){
      console.log("挂载之后")
      
    },
    beforeUpdate(){
      console.log("更新之前")
    },
    updated(){
      console.log("更新之后")
    },
    beforeDestroy(){
      console.log("销毁之前 处理一些要释放的资源")
    },
    destroyed(){
      console.log("销毁之后")
    }
    

  });
</script>
